---
title: "Install Tailwind CSS with Angular"
description: "Setting up Tailwind CSS in an Angular project."
tool: Angular
---

<!--
#####
Launch day test: Angular works with the normal tailwindcss package 🎉
#####
-->

```preval installation
tool: Angular 
reference:
  name: Angular CLI
  link: https://angular.io/guide/setup-local#install-the-angular-cli
script: ng new 
```

```preval setup
version: latest 
dependencies:
  - postcss-loader
  - '@angular-builders/custom-webpack'
```


```preval configuration
postcss: false
purge: 
  - ./resources/**/*.blade.php
  - ./resources/**/*.js
  - ./resources/**/*.vue
```

Next, let's create a `webpack.config.js` at the root of our project, and tell webpack to handle CSS files with the `postcss-loader`:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            plugins: () => [require("tailwindcss"), require("autoprefixer")],
          },
        },
      },
    ],
  },
}
```

```preval include
file: ./src/styles.css
```

Finally, we need to update the `angular.json` file to let it know about our custom webpack config. We'll need to update the `architect.build` and `architect.serve` sections of the config.

Locate the `architect.build` key, and under `builder`, replace `@angular-devkit/build-angular:browser` with `@angular-builders/custom-webpack:browser`.

```diff-json
  "architect": {
    "build": {
-      "builder": "@angular-devkit/build-angular:browser"
+      "builder": "@angular-builders/custom-webpack:browser"
    }
  }
```

In the `options` just below, add a `customWebpackConfig` object with the `path` to the webpack config:

```diff-json
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
+       "customWebpackConfig": {
+         "path": "./webpack.config.js"
+       },
        "outputPath": "dist/angular",
      }
    }
  }
```

Now, let's do something very similar in `architect.serve`:

```diff-json
  "architect": {
    "serve": {
-     "builder": "@angular-devkit/build-angular:dev-server",
+     "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "browserTarget": "angular:build",
+       "customWebpackConfig": {
+         "path": "./webpack.config.js"
+       }
      }
    }
  }
```

```preval configuration
purge: 
  - ./path/to/files 
```

---

```preval finish
scripts:
  - npm run start
```

